<template>
	<view class="app-container">
		<view  class="search-input">
			<input type="text" v-model="username" placeholder="手机号" />
			<view class="btn" @click="handleSearch">搜索</view>
		</view>
		<cell-friend :title="friend.nickname" v-if="isSearch && friend.username" @click.native="goAdd">
			<template v-slot:left>
				<image class="icon-friend" :src="friend.avatar ? friend.avatar: defaultAvatar"></image>
			</template>
		</cell-friend>
		<view v-if="isSearch && !friend.username">没有找到...</view>
	</view>
</template>

<script>
	import CellFriend from '../../components/cell-friend.vue'
	export default {
		components:{
			CellFriend
		},
		data() {
			return {
				defaultAvatar:require("../../static/images/avatar.png"),
				username:'',
				friend:{},
				isSearch:false
			}
		},
		methods:{
			handleSearch() {
				if(this.username.trim()) {
					this.$http('/admin/sys/user/getUserByUsername/'+this.username).then(res => {
						this.friend = res.data.data
						this.isSearch = true
					})
				}
			},
			goAdd() {
				uni.navigateTo({
					url:'/pages/discovery/apply?toId='+this.friend.id
				})
			}
		}
	}
</script>

<style>
	.search-input{
		width: 100%;
		height: 34px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 5px;
		margin-bottom: 20px;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	.search-input input{
		background-color: #fff;
		flex: 1;
		padding: 5px 10px;
	}
	.btn{
		padding-left: 10px;
	}
</style>
